import React from 'react';
import { Link } from 'react-router-dom';
import { content, test, test2, canvas, canvas1, canvasDiv } from './index.less';

import HosChart, { init } from './hosCharts/hosCharts';

type StateType = {
    height: number;
    width: number;
};
type propType = {};
interface Index {
    state: StateType;
    props: propType;
}

class Index extends React.Component<any> {
    chart: any;
    chart1: any;
    chart2: any;
    canvasRef: React.RefObject<any>;
    canvasDivRef: React.RefObject<any>;
    canvasRef1: React.RefObject<any>;
    canvasRef2: React.RefObject<any>;
    constructor(props: any) {
        super(props);
        this.state = {
            width: 900,
            height: 700,
        };
        this.canvasRef = React.createRef();
        this.canvasRef1 = React.createRef();
        this.canvasRef2 = React.createRef();
        this.canvasDivRef = React.createRef();
    }

    componentDidMount() {
        // console.log('componentDidMount');
        const canvas = this.canvasRef.current;
        const ctx = canvas.getContext('2d');
        this.chart = init(ctx);
        const canvas1 = this.canvasRef1.current;
        const ctx1 = canvas1.getContext('2d');
        this.chart1 = init(ctx1);
        const canvas2 = this.canvasRef2.current;
        const ctx2 = canvas1.getContext('2d');
        this.chart2 = init(ctx2);
        this.resize();
        window.addEventListener('resize', this.resize);
    }
    componentDidUpdate(_prevProps: any, _prevState: any, _snapshot: any) {
        // console.log('componentDidUpdate');
        if (this.state.width !== _prevState.width) {
            this.setOption();
        }
    }
    setOption = () => {
        let { width, height } = this.state;
        this.chart.setOption({
            width,
            height,
            // grid: {
            //     top: 5,
            //     left: 5,
            //     right: 5,
            //     bottom: 5,
            // },
            xAxis: {
                // show: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            // yAxis: {
            //     show: false,
            //     splitLine: {
            //         show: false,
            //     },
            // },
            series: [
                {
                    type: 'bar',
                    data: [
                        100, 500, 600, 640, 600, 500, 100, 150, 500, 550, 650, 450, 160, 240, 300, 680, 540, 430, 420,
                    ],
                },
                {
                    type: 'line',
                    // smooth: true,
                    lineWidth: 2,
                    // symbol: 'none',
                    data: [
                        100, 500, 600, 640, 600, 500, 100, 150, 500, 550, 650, 450, 160, 240, 300, 680, 540, 430, 420,
                    ],
                },
                {
                    name: 'Email',
                    type: 'line',
                    smooth: true,
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                },
                {
                    name: 'Union Ads',
                    type: 'bar',
                    smooth: true,
                    data: [220, 282, 291, 234, 290, 330, 310],
                },
                {
                    name: 'Video Ads',
                    smooth: true,
                    type: 'line',
                    data: [420, 552, 480, 580, 490, 530, 420],
                },
                {
                    name: 'Direct',
                    type: 'line',
                    smooth: true,
                    data: [620, 632, 601, 634, 690, 630, 620],
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    smooth: true,
                    data: [820, 932, 901, 800, 1290, 1330, 1320],
                },
            ],
        });

        this.chart1.setOption({
            width,
            height,
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '50%'],
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' },
                    ],
                },
            ],
        });

        // this.chart2.setOption({
        //     width,
        //     height,
        //     xAxis: {},
        //     yAxis: {},
        //     series: [
        //         {
        //             symbolSize: 20,
        //             data: [
        //                 [10.0, 8.04],
        //                 [8.07, 6.95],
        //                 [13.0, 7.58],
        //                 [9.05, 8.81],
        //                 [11.0, 8.33],
        //                 [14.0, 7.66],
        //                 [13.4, 6.81],
        //                 [10.0, 6.33],
        //                 [14.0, 8.96],
        //                 [12.5, 6.82],
        //                 [9.15, 7.2],
        //                 [11.5, 7.2],
        //                 [3.03, 4.23],
        //                 [12.2, 7.83],
        //                 [2.02, 4.47],
        //                 [1.05, 3.33],
        //                 [4.05, 4.96],
        //                 [6.03, 7.24],
        //                 [12.0, 6.26],
        //                 [12.0, 8.84],
        //                 [7.08, 5.82],
        //                 [5.02, 5.68],
        //             ],
        //             type: 'scatter',
        //         },
        //     ],
        // });
    };
    resize = () => {
        let div = this.canvasDivRef.current;
        let d_w = div.clientWidth;
        this.setState({
            width: d_w,
        });
    };
    componentWillUnmount() {
        window.removeEventListener('resize', this.resize);
    }
    render() {
        return (
            <div className={content}>
                <ul>
                    <li className={test2}>
                        <Link to="/login">login</Link>
                    </li>
                    <li className={test}>
                        <Link to="/home">home</Link>
                    </li>
                    <li className={test2}>
                        <Link to="/blog">blog</Link>
                    </li>
                    <li>
                        <Link to="/resume">resume</Link>
                    </li>
                    <li>
                        <Link to="/user">user</Link>
                    </li>
                </ul>
                <div className={canvasDiv} ref={this.canvasDivRef}>
                    <canvas
                        className={canvas}
                        ref={this.canvasRef}
                        width={this.state.width}
                        height={this.state.height}
                    ></canvas>
                    <canvas
                        className={canvas1}
                        ref={this.canvasRef1}
                        width={this.state.width}
                        height={this.state.height}
                    ></canvas>
                    <canvas
                        className={canvas1}
                        ref={this.canvasRef2}
                        width={this.state.width}
                        height={this.state.height}
                    ></canvas>
                </div>
            </div>
        );
    }
}

export default Index;
